<template>
  <div class="assessment">
    <Home_header :settings="config.setting" :showtop="false"></Home_header>
    <div class="from_con">
      <h1 class="title">MBA院校择生背景评估测试</h1>
      <div class="panel">
        <p>1、考硕士目的</p>
        <div class="panel-bd">
        <el-checkbox-group v-model="kaoyanmudi">
          <el-checkbox label="提升学历"></el-checkbox>
          <el-checkbox label="提升管理能力"></el-checkbox>
          <el-checkbox label="扩大人脉"></el-checkbox>
          <el-checkbox label="其他"></el-checkbox>
        </el-checkbox-group>
        </div>
      </div>
      <div class="panel">
        <p>2、您现在的最高学位学历</p>
        <div class="panel-bd">
          <el-radio-group v-model="zuigaoxuewei">
            <el-radio label="博士"></el-radio>
            <el-radio label="硕士"></el-radio>
            <el-radio label="双学士"></el-radio>
            <el-radio label="本科（有学位）"></el-radio>
            <el-radio label="自考本科（有学位）"></el-radio>
            <el-radio label="专升本（有学位）"></el-radio>
            <el-radio label="本科（无学位）"></el-radio>
            <el-radio label="自考本科（无学位）"></el-radio>
            <el-radio label="专升本（无学位）"></el-radio>
            <el-radio label="三年制大专"></el-radio>
            <el-radio label="2.5年制大专"></el-radio>
            <el-radio label="两年制大专"></el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="panel">
        <p>3、毕业院校性质</p>
        <div class="panel-bd">
          <el-radio-group v-model="xiaoyuanxingzhi">
            <el-radio label="985、211"></el-radio>
            <el-radio label="211"></el-radio>
            <el-radio label="一本"></el-radio>
            <el-radio label="二本"></el-radio>
            <el-radio label="三本"></el-radio>
            <el-radio label="自考本科"></el-radio>
            <el-radio label="自考专科"></el-radio>
            <el-radio label="成人本科"></el-radio>
            <el-radio label="网络本科"></el-radio>
            <el-radio label="网络专科"></el-radio>
            <el-radio label="电大"></el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="panel">
        <p>4、学历性质</p>
        <div class="panel-bd">
          <el-radio-group v-model="xuelixingzhi">
            <el-radio label="统考全日制"></el-radio>
            <el-radio label="成人教育"></el-radio>
            <el-radio label="网络教育/远程教育"></el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="panel">
        <p>5、工作单位性质</p>
        <div class="panel-bd">
          <el-radio-group v-model="gongzuodanweixingzhi">
            <el-radio label="国有企业"></el-radio>
            <el-radio label="政府机构"></el-radio>
            <el-radio label="事业单位"></el-radio>
            <el-radio label="民营企业"></el-radio>
            <el-radio label="其它"></el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="panel">
        <p>6、公司所属行业</p>
        <div class="panel-bd">
          <el-radio-group v-model="gongshisuoshuhangye">
            <el-radio label="金融"></el-radio>
            <el-radio label="制造"></el-radio>
            <el-radio label="贸易"></el-radio>
            <el-radio label="高科技"></el-radio>
            <el-radio label="房产"></el-radio>
            <el-radio label="综合性"></el-radio>
            <el-radio label="培训"></el-radio>
            <el-radio label="其他"></el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="panel">
        <p>7、您在公司的职务</p>
        <div class="panel-bd">
          <el-radio-group v-model="zhiwu">
            <el-radio label="总经理"></el-radio>
            <el-radio label="总监"></el-radio>
            <el-radio label="项目经理"></el-radio>
            <el-radio label="主管"></el-radio>
            <el-radio label="其他"></el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="panel">
        <p>8、您的数学基础</p>
        <div class="panel-bd">
          <el-radio-group v-model="shuxuejichu">
            <el-radio label="优秀"></el-radio>
            <el-radio label="一般"></el-radio>
            <el-radio label="较差"></el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="panel">
        <p>9、英语等级</p>
        <div class="panel-bd">
          <el-radio-group v-model="yingyudengji">
            <el-radio label="专业八级"></el-radio>
            <el-radio label="专业四级"></el-radio>
            <el-radio label="六级"></el-radio>
            <el-radio label="四级"></el-radio>
            <el-radio label="其他"></el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="panel">
        <p>10、报考专业</p>
        <div class="panel-bd">
          <el-radio-group v-model="baokaozhuanye">
            <el-radio label="MBA/EMBA"></el-radio>
            <el-radio label="MPA"></el-radio>
            <el-radio label="MPAcc"></el-radio>
            <el-radio label="MEM"></el-radio>
            <el-radio label="旅游管理硕士"></el-radio>
            <el-radio label="图书情报硕士"></el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="panel">
        <p>11、意向院校</p>
        <div class="panel-bd">
          <el-checkbox-group v-model="yixiangyuanxiao">
            <el-checkbox label="中国海洋大学"></el-checkbox>
            <el-checkbox label="青岛大学"></el-checkbox>
            <el-checkbox label="青岛科技大学"></el-checkbox>
            <el-checkbox label="中国石油大学"></el-checkbox>
            <el-checkbox label="哈尔滨工程大学"></el-checkbox>
            <el-checkbox label="西安交通大学"></el-checkbox>
            <el-checkbox label="山东大学"></el-checkbox>
            <el-checkbox label="山东科技大学"></el-checkbox>
            <el-checkbox label="清华大学"></el-checkbox>
            <el-checkbox label="北京大学"></el-checkbox>
            <el-checkbox label="中国人民大学"></el-checkbox>
            <el-checkbox label="复旦大学"></el-checkbox>
            <el-checkbox label="上海交通大学"></el-checkbox>
            <el-checkbox label="南开大学"></el-checkbox>
            <el-checkbox label="中央财经大学"></el-checkbox>
            <el-checkbox label="对外经贸大学"></el-checkbox>
            <el-checkbox label="上海财经大学"></el-checkbox>
            <el-checkbox label="中山大学"></el-checkbox>
            <el-checkbox label="其他"></el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="panel">
        <div class="panel-bd">
          <p class="red_x">* 学员需提交真实信息，学员信息由MBA招生顾问老师进行评估，评估结果在一个工作日以内回馈；</p>
          <p class="red_x">* 参与在线评估学员可获得与意向院校招生顾问老师当面1对1沟通辅导机会一次；</p>
          <p class="red_x">* 学员与MBA评估老师进行预约确认后，可在华章咨询会或公开课现场领取复习资料。</p>
        </div>
      </div>
      <div class="panel">
        <p>填写个人信息</p>
        <div class="panel-bd">
          <div>
            <span class="danger ors">
              <span>
                <strong>姓名</strong>
              </span>
              <input v-model="formname" type="text" name="name"   class="text" />
            </span>
            <span class="danger ors">
              <span>
                <strong>手机</strong>
              </span>
              <input v-model="formphone" type="text" class="text" name="mobile"/>
            </span>
            <span class="danger ors">
              <span>
                <strong>微信</strong>
              </span>
              <input v-model="formwx"  type="text" class="text" name="微信"/>
            </span>
          </div>
        </div>
      </div>
      <div class="panel">
        <p>填写邮寄地址，免费获取招生简章+复习资料+真题资料</p>
        <div class="panel-bd">
          <div>
            <span class="danger" style="width:75%">
              <span>
                <strong>地址</strong>
              </span>
              <input
                v-model="formaddress"
                type="text"
                class="text"
                name="address"
                id="address"
              />
            </span>
          </div>
        </div>
      </div>
      <div>
          <input type="submit" style="outline: none" @click="submitform" value="提交报名" class="button qd-btn">
      </div>
    </div>
  </div>
</template>

<script>
import Home_header from "../../components/Home-header";
export default {
  name: "assessment",
  components: {
    Home_header,
  },
  async asyncData({ app }) {
    //更多类型
    let config = await app.$apiconfig();
    console.log("app", app);

    return {
      config: config
      // boxsiz: boxsiz,
      // basecontent: basecontent
    };
  },
    data(){
      return{
          formaddress:'',
          formname:'',
          formphone:'',
          formwx:'',
          kaoyanmudi:[],
          zuigaoxuewei:'',
          xiaoyuanxingzhi:'',
          xuelixingzhi:'',
          gongzuodanweixingzhi:'',
          gongshisuoshuhangye:'',
          zhiwu:'',
          shuxuejichu:'',
          yingyudengji:'',
          baokaozhuanye:'',
          yixiangyuanxiao:[],

      }
    },
  head() {
    return this.config.header;
  },
   watch:{
       kaoyanmudi(e){
           console.log(e)
       },
       zuigaoxuewei(e){
           console.log(e)
       },
   },
  created() {

  },
    methods:{
        submitform(){
            if(this.kaoyanmudi.length<1){
                this.$message.error('请选择您的考研目的');
                return false
            }
            if(!this.zuigaoxuewei){
                this.$message.error('请选择您的最高学历');
                return false
            }
            if(!this.xiaoyuanxingzhi){
                this.$message.error('请选择您的毕业院校性质');
                return false
            }
            if(!this.xuelixingzhi){
                this.$message.error('请选择您的学历性质');
                return false
            }
            if(!this.gongzuodanweixingzhi){
                this.$message.error('请选择您的工作单位性质');
                return false
            }
            if(!this.gongshisuoshuhangye){
                this.$message.error('请选择您的公司所属行业');
                return false
            }
            if(!this.zhiwu){
                this.$message.error('请选择您的您在公司的职务');
                return false
            }
            if(!this.shuxuejichu){
                this.$message.error('请选择您的数学基础');
                return false
            }
            if(!this.yingyudengji){
                this.$message.error('请选择您的英语等级');
                return false
            }
            if(!this.baokaozhuanye){
                this.$message.error('请选择您的报考专业');
                return false
            }
            if(!this.yixiangyuanxiao){
                this.$message.error('请选择您的意向院校');
                return false
            }
            if(this.yixiangyuanxiao.length<1){
                this.$message.error('请选择您的意向院校');
                return false
            }
            if(!this.formname){
                this.$message.error('请填写您的姓名');
                return false
            }
            if(!this.formphone){
                this.$message.error('请填写您联系电话');
                return false
            }
            let data = {
                name:this.formname,
                phone:this.formphone,
                address:this.formaddress,
                content:[{
                    title:'考硕士目的',
                    answer:this.kaoyanmudi.join(','),
                },{
                    title:'最高学位学历',
                    answer:this.zuigaoxuewei,
                },{
                    title:'毕业院校性质',
                    answer:this.xiaoyuanxingzhi,
                },{
                    title:'学历性质',
                    answer:this.xuelixingzhi,
                },{
                    title:'工作单位性质',
                    answer:this.gongzuodanweixingzhi,
                },{
                    title:'公司所属行业',
                    answer:this.gongshisuoshuhangye,
                },{
                    title:'公司的职务',
                    answer:this.zhiwu,
                },{
                    title:'数学基础',
                    answer:this.shuxuejichu,
                },{
                    title:'英语等级',
                    answer:this.yingyudengji,
                },{
                    title:'报考专业',
                    answer:this.baokaozhuanye,
                },{
                    title:'意向院校',
                    answer:this.yixiangyuanxiao.join(','),
                },
                ],
            };
           // console.log(data);
            debugger
            this.$apiPost('addassess',data).then(res=>{
                //console.log(res)
                if(res.code==1){
                    this.$message.success('提交成功！')
                }else {
                    this.$message.error("提交失败")
                }
            })
        },
    }
};
</script>

<style scoped>
.qd-btn {
    width: 160px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #ffffff;
    background-color: #1369C0;
    border-color: #F21567;
    border-radius: 25px;
    cursor: pointer;
    margin-left: 100px;
    border: none;
    font-size: 14px;
}
.ors input {
  width: 170px !important;
  height: 25px !important;
}
.ors {
  width: calc((100% - 25px) / 4) !important;
  display: flex;
}
.red_x {
  color: red !important;
  font-size: 13px !important;
  background: none !important;
  border-bottom: none !important;
  padding: 2px !important;
}
.danger span {
  font-size: 13px;
  color: #666;
  display: inline-block;
  margin-left: 10px;
}
.danger {
  width: calc((100% - 25px) / 6);
  display: inline-block;
  align-items: center;
  line-height: 22px;
}
.panel-bd {
  width: 100%;
  padding: 12px 20px;
  box-sizing: border-box;
  display: inline-block;
  align-items: center;
}
.panel p {
  width: 100%;
  padding: 8px 15px;
  border-bottom: 1px solid #ddd;
  background-color: #f5f5f5;
  font-size: 16px;
  box-sizing: border-box;
  color: #1369c0;
}
.panel {
  width: 100%;
  margin-bottom: 20px;
  background-color: #fff;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 0;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.title {
  margin-bottom: 15px;
  text-align: center;
  background: #1369c0;
  color: #fff;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}
.from_con {
  width: 1050px;
  margin: auto;
  height: auto;
  background: #fff;
  margin-top: 20px;
  padding: 20px;
  box-sizing: border-box;
}
.panel-bd .el-checkbox{
  margin-right: 30px;
}
.panel-bd .el-radio{
  color: #606266;
  cursor: pointer;
  margin: 0;
  width: 160px;
  margin-bottom: 10px;
}
@media (max-width:800px){
   .from_con{
     width: 100%;
   }
  .danger{
    width: 100% !important;
  }
}

</style>
